/**
 * 详情
 */
import React  from 'react'
import style from './index.less'
import {Card,Row,Col,Table} from 'antd'
import moment from 'moment'
import KCharts from '../../components/KCharts'
import fx from '../../../../components/investmentAnalysis/utils/fx'
import smileImg from '../../../../assets/images/smile.png';
import sadImg from '../../../../assets/images/sad.png';

const TradeDetails=({
	title="最大盈利的平仓记录",
	info={
		"trader":"54701",
		"dataDate":"2018-01-05",
		"orderId":"957639",
		"symbol":"002466.SZ",
		"tradeType":"Sell",
		"price":58.74,
		"quantity":1000,
		"fee":63.94,
		"timestamp":"Jan 5, 2018 9:39:18 AM",
		"tradeDate":"2018-01-05",
		"comment":"把握交易时机较差，需加强。",
		"score":60
	},
	kLine={
		"data":[
			["20171226000000",51.00,51.90,50.10,53.39,17262791.00,895024443.38],
			["20171227000000",51.99,52.91,51.50,53.50,20363194.00,1076839809.38],
			["20171228000000",52.70,52.90,52.53,53.60,14183451.00,752768754.45],
			["20171229000000",52.94,53.21,52.51,53.48,8514334.00,450532184.77],
			["20180102000000",53.25,53.23,52.70,53.70,11233456.00,598330432.23],
			["20180103000000",53.52,56.86,53.25,57.51,32858777.00,1842306212.59],
			["20180104000000",56.50,57.82,56.29,59.07,27560505.00,1598814840.46],
			["20180105000000",57.75,57.58,57.10,58.88,11696667.00,676069885.50]
		],
		"point":[
			{
				"trader":"54701",
				"dataDate":"2018-01-05",
				"symbol":"002466.SZ",
				"tradeType":"Buy",
				"buyPrice":51.3,
				"sellPrice":58.74,
				"quantity":1000,
				"fee":68.49,
				"openTime":"Dec 26, 2017 11:20:00 AM",
				"closeTime":"Jan 5, 2018 9:39:18 AM",
				"openOrderId":"887091",
				"closeOrderId":"957639",
				"tradeDate":"2018-01-05",
				"pnl":7371.51
			}
		]
	},
	table=[
		{
			"trader":"54701",
			"dataDate":"2018-01-05",
			"symbol":"002466.SZ",
			"tradeType":"Buy",
			"buyPrice":51.3,
			"sellPrice":58.74,
			"quantity":1000,
			"fee":68.49,
			"openTime":"Dec 26, 2017 11:20:00 AM",
			"closeTime":"Jan 5, 2018 9:39:18 AM",
			"openOrderId":"887091",
			"closeOrderId":"957639",
			"tradeDate":"2018-01-05",
			"pnl":7371.51
		}
	]
})=>{
	const infoConfig=[
		{
			"name":"单号",
			"value":info.orderId
		},
		{
			"name":"股票",
			"value":info.symbol
		},
		{
			"name":"类型",
			"value":info.tradeType==='Sell'?'卖出':'买入'
		},
		{
			"name":"价格",
			"value":info.price
		},
		{
			"name":"数量",
			"value":info.quantity
		},
		{
			"name":"费用",
			"value":info.fee
		},
		{
			"name":"时间",
			"value":moment(info.timestamp).format('YYYY-MM-DD hh:mm:ss')
		},
		// {
		// 	"name":"评语",
		// 	"value":info.comment
		// }
	]
	const tableConfig={
		dataSource:table,
		columns:[
			{
				title: '股票代码',
				dataIndex: 'symbol',
				key: 'symbol',
			},
			{
				title: '类型',
				dataIndex: 'tradeType',
				key: 'tradeType',
				sorter: (a, b) => a.tradeType - b.tradeType,
				render: (text, row, index) => text==='Buy'?<span style={{color:"red"}}>做多</span>:<span style={{color:"green"}}>做空</span>
			},
			{
				title: '买入价格',
				dataIndex: 'buyPrice',
				key: 'buyPrice',
				sorter: (a, b) => a.buyPrice - b.buyPrice,
			},
			{
				title: '买入时间',
				dataIndex: 'openTime',
				key: 'openTime',
				sorter: (a, b) => a.openTime > b.openTime?1:-1,
				render:(text)=>moment(text).format('YYYY-MM-DD HH:mm:ss')
			},
			{
				title: '卖出价格',
				dataIndex: 'sellPrice',
				key: 'sellPrice',
				sorter: (a, b) => a.sellPrice - b.sellPrice
			},
			{
				title: '卖出时间',
				dataIndex: 'closeTime',
				key: 'closeTime',
				sorter: (a, b) => a.closeTime > b.closeTime?1:-1,
				render:(text)=>moment(text).format('YYYY-MM-DD HH:mm:ss')
			},
			{
				title: '交易数量',
				dataIndex: 'quantity',
				key: 'quantity',
				sorter: (a, b) => a.quantity - b.quantity,
			},
			{
				title: '费用',
				dataIndex: 'fee',
				key: 'fee',
				sorter: (a, b) => a.fee - b.fee,
				render: text => text.toFixed(2)
			},
			{
				title: '盈亏',
				render: (text, row) => {
					const { tradeType, buyPrice, sellPrice, quantity, fee } = row;
					return fx.colorMoney((sellPrice - buyPrice) * quantity - fee);
				},
			}
		],
		rowKey:row => (row.closeOrderId + row.openOrderId)
	}

	return(
		<Card title={title}  >
			<Row className={style.info} gutter={0}>
				<Col xs={24} sm={7} md={7} lg={7} xl={7}>
					<h3 style={{textAlign:'left',marginBottom:10}}>交易详情</h3>
					{
						infoConfig.map((item,i)=><dl key={i}>
							<dt>{item.name}</dt>
							<dd>{item.value}</dd>
						</dl>)
					}
					<img
						src={info.score >= 60 ? smileImg : sadImg }
						width='128'
					/>
				</Col>
				<Col  xs={24} sm={17} md={17} lg={17} xl={17}>
					<KCharts {...kLine} />
				</Col>
			</Row>
			<Row>
				<Col>
					<Table
						{...tableConfig}
						pagination={false}
					/>
				</Col>
			</Row>
		</Card>
	)

}

TradeDetails.propTypes={
	// data
}

export default TradeDetails
